<template>
  <div class="table1_container">
    <div class="table1_dataShower" style="padding-bottom: 50px; padding-top: 50px; box-sizing: border-box">
      <button class="report-top-button" @click="back">返回上级页面</button>
      <button class="report-top-button" @click="print">报表打印</button>
      <div class="example" style="text-align: center; margin: 10px 0;">
        <div style="display: inline-flex; gap: 20px;">
          <!-- 未完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffffff; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>未完成</span>
          </div>

          <!-- 已完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #e6f7e6; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>已完成</span>
          </div>

          <!-- 不合格重采 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffebeb; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>不合格重采</span>
          </div>
        </div>
      </div>
      <h1>现浇结构检验批质量验收记录</h1>
      <div style="width: 90%; text-align: right; margin-bottom: 5px;">
        <span style="margin-right: 10%;">流水号:{{ (previewData && previewData.streamNumber) || '*****' }}</span>
      </div>
      <table class="table1_reportTable">
        <tr>
          <td colspan="5"><strong>单位（子单位）<br>工程名称</strong></td>
          <td colspan="5">{{ (previewData && previewData.subprojectName) || '' }}</td>
          <td colspan="5"><strong>分部（子分部）<br>工程名称</strong></td>
          <td colspan="5">{{ (previewData && previewData.fenbuProjectName) || '' }}</td>
          <td colspan="5"><strong>分项工程名称</strong></td>
          <td colspan="5">{{ (previewData && previewData.fenxiangName) || '' }}</td>
        </tr>
        <tr>
          <td colspan="5"><strong>施工单位</strong></td>
          <td colspan="5">{{ (previewData && previewData.shigongCompanyName) || '' }}</td>
          <td colspan="5"><strong>项目负责人</strong></td>
          <td colspan="5">{{ (previewData && previewData.shigongDirector) || '' }}</td>
          <td colspan="5"><strong>检验批容量</strong></td>
          <td colspan="5">{{ (previewData && previewData.taskInspectBatchVolumeSources) || '' }}</td>
        </tr>
        <tr>
          <td colspan="5"><strong>分包单位</strong></td>
          <td colspan="5">{{ (previewData && previewData.fenbaoCompany) || '' }}</td>
          <td colspan="5"><strong>分包单位项目<br>负责人</strong></td>
          <td colspan="5">{{ (previewData && previewData.fenbaoDirector) || '' }}</td>
          <td colspan="5"><strong>检验批部位</strong></td>
          <td colspan="5">{{ (previewData && previewData.inspectPart) || '' }}</td>
        </tr>
        <tr>
          <td colspan="5"><Strong>施工依据</Strong></td>
          <td colspan="10">{{ (previewData && previewData.shigongRule) || '' }}</td>
          <td colspan="7"><strong>验收依据</strong></td>
          <td colspan="8">{{ (previewData && previewData.yanshouRule) || '' }}</td>
        </tr>

        <tr>
          <th colspan="10">验收项目</th>
          <th colspan="3">设计要求及规范制定</th>
          <th colspan="1">样本总数</th>
          <th colspan="4">最小/实际抽样数量</th>
          <th colspan="8">检查记录</th>
          <th colspan="4">检查结果</th>
        </tr>

        <!-- 主控项目 -->
        <tr>
          <td rowspan="2" colspan="1">主控项目</td>
          <td colspan="1">1</td>
          <td colspan="8">外观质量</td>
          <td colspan="3">{{ getMainItemProperty(0, 'ruleStandard') }}</td>
          <td colspan="1">{{ getMainItemProperty(0, 'sampleAmount') }}</td>
          <td colspan="4">{{ getMainItemProperty(0, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getMainItemProperty(0, 'checkRecord') }}</td>
          <td colspan="4">{{ getMainItemProperty(0, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="1">2</td>
          <td colspan="8">影响结构性能或使用功能的尺寸偏差</td>
          <td colspan="3">{{ getMainItemProperty(1, 'ruleStandard') }}</td>
          <td colspan="1">{{ getMainItemProperty(1, 'sampleAmount') }}</td>
          <td colspan="4">{{ getMainItemProperty(1, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getMainItemProperty(1, 'checkRecord') }}</td>
          <td colspan="4">{{ getMainItemProperty(1, 'passRate') }}</td>
        </tr>

        <!-- 一般项目 -->
        <tr>
          <td rowspan="21" colspan="1">一般项目</td>
          <td colspan="1">1</td>
          <td colspan="8">外观质量一般缺陷</td>
          <td colspan="3">{{ getGeneralItemProperty(0, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(0, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(0, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(0, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(0, 'passRate') }}</td>
        </tr>

        <tr>
          <td rowspan="20" colspan="1">2</td>
          <td rowspan="20" colspan="1" class="rowspanStyle">现浇结构位置、尺寸允许偏差mm</td>
          <td rowspan="3" colspan="1">轴线位置</td>
          <td colspan="6">整体基础</td>
          <td colspan="3">{{ getGeneralItemProperty(1, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(1, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(1, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(1, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(1, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">独立基础</td>
          <td colspan="3">{{ getGeneralItemProperty(2, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(2, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(2, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(2, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(2, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">墙、柱、梁</td>
          <td colspan="3">{{ getGeneralItemProperty(3, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(3, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(3, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(3, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(3, 'passRate') }}</td>
        </tr>

        <tr>
          <td rowspan="4" colspan="1">垂直度</td>
          <td rowspan="2" colspan="1">层高</td>
          <td colspan="5">≤6m</td>
          <td colspan="3">{{ getGeneralItemProperty(4, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(4, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(4, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(4, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(4, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="5">＞6m</td>
          <td colspan="3">{{ getGeneralItemProperty(5, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(5, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(5, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(5, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(5, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">全高（H）≤300m</td>
          <td colspan="3">{{ getGeneralItemProperty(6, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(6, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(6, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(6, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(6, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">全高（H）＞300m</td>
          <td colspan="3">{{ getGeneralItemProperty(7, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(7, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(7, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(7, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(7, 'passRate') }}</td>
        </tr>

        <tr>
          <td rowspan="2" colspan="1">标高</td>
          <td colspan="6">层高</td>
          <td colspan="3">{{ getGeneralItemProperty(8, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(8, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(8, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(8, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(8, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">全高</td>
          <td colspan="3">{{ getGeneralItemProperty(9, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(9, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(9, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(9, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(9, 'passRate') }}</td>
        </tr>

        <tr>
          <td rowspan="3" colspan="1">截面尺寸</td>
          <td colspan="6">基础</td>
          <td colspan="3">{{ getGeneralItemProperty(10, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(10, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(10, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(10, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(10, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">柱、梁、板、墙</td>
          <td colspan="3">{{ getGeneralItemProperty(11, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(11, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(11, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(11, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(11, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">楼梯相邻踏步高差</td>
          <td colspan="3">{{ getGeneralItemProperty(12, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(12, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(12, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(12, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(12, 'passRate') }}</td>
        </tr>

        <tr>
          <td rowspan="2" colspan="1">电梯井</td>
          <td colspan="6">中心线位置</td>
          <td colspan="3">{{ getGeneralItemProperty(13, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(13, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(13, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(13, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(13, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="6">长、宽尺寸</td>
          <td colspan="3">{{ getGeneralItemProperty(14, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(14, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(14, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(14, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(14, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="7">表面平整度</td>
          <td colspan="3">{{ getGeneralItemProperty(15, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(15, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(15, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(15, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(15, 'passRate') }}</td>
        </tr>

        <tr>
          <td rowspan="4" colspan="7">预埋件中心位置</td>
          <td colspan="1">预埋板</td>
          <td colspan="2">{{ getGeneralItemProperty(16, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(16, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(16, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(16, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(16, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="1">预埋螺栓</td>
          <td colspan="2">{{ getGeneralItemProperty(17, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(17, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(17, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(17, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(17, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="1">顶埋管</td>
          <td colspan="2">{{ getGeneralItemProperty(18, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(18, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(18, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(18, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(18, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="1">其他</td>
          <td colspan="2">{{ getGeneralItemProperty(19, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(19, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(19, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(19, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(19, 'passRate') }}</td>
        </tr>

        <tr>
          <td colspan="7">预留洞、孔中心线位置</td>
          <td colspan="3">{{ getGeneralItemProperty(20, 'ruleStandard') }}</td>
          <td colspan="1">{{ getGeneralItemProperty(20, 'sampleAmount') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(20, 'minAndCollectedAmount') }}</td>
          <td colspan="8">{{ getGeneralItemProperty(20, 'checkRecord') }}</td>
          <td colspan="4">{{ getGeneralItemProperty(20, 'passRate') }}</td>
        </tr>

        <tr id="table1_reportTable_bottom">
          <td rowspan="3" colspan="7" style="border-right: 1px solid black">施工单位<br>检查结果</td>
          <td rowspan="3" colspan="13">主控项目全部合格，一般项目满足规范要求，本检验批合格</td>
          <td colspan="10" style="text-align: left">专业工长（施工员）：</td>
        </tr>
        <tr id="table1_reportTable_bottom">
          <td colspan="10" style="text-align: left">项目专业质量检查员：</td>
        </tr>
        <tr id="table1_reportTable_bottom">
          <td colspan="10" style="text-align: right"><span style="letter-spacing: 2em">年月日</span></td>
        </tr>

        <tr id="table1_reportTable_bottom" style="border-top: 1px solid black">
          <td rowspan="3" colspan="7" style="border-right: 1px solid black">监理（建设单位）<br>验收结论</td>
          <td rowspan="3" colspan="13">同意验收</td>
          <td colspan="10" style="text-align: left">专业监理工程师</td>
        </tr>
        <tr id="table1_reportTable_bottom">
          <td colspan="10" style="text-align: left">（建设单位项目专业负责人）：</td>
        </tr>
        <tr id="table1_reportTable_bottom">
          <td colspan="10" style="text-align: right"><span style="letter-spacing: 2em">年月日</span></td>
        </tr>

      </table>
    </div>
  </div>
</template>

<script>
import { searchInpsectCheckPreview } from '@/api/statementManage/yanShou/statementManage'

export default {
  name: 'NoZoomPage',
  data() {
    return {
      localStorageId: '',
      reportData: {},
      previewData: {
        subprojectName: '',
        fenbuProjectName: '',
        fenxiangName: '',
        shigongCompanyName: '',
        shigongDirector: '',
        taskInspectBatchVolumeSources: '',
        fenbaoCompany: '',
        fenbaoDirector: '',
        inspectPart: '',
        shigongRule: '',
        yanshouRule: '',
        streamNumber: '',
        mainItems: [],
        generalItems: []
      },
      originalViewport: ''
    }
  },
  methods: {
    // 安全访问mainItems的方法 - 主控项目
    getMainItemProperty(index, property) {
      if (this.previewData &&
        this.previewData.mainItems &&
        this.previewData.mainItems[index]) {
        return this.previewData.mainItems[index][property] || ''
      }
      return ''
    },

    // 安全访问generalItems的方法 - 一般项目
    getGeneralItemProperty(index, property) {
      if (this.previewData &&
        this.previewData.generalItems &&
        this.previewData.generalItems[index]) {
        return this.previewData.generalItems[index][property] || ''
      }
      return ''
    },

    back() {
      this.$router.go(-1)
    },
    print() {
      window.print()
    },
    preventZoom(e) {
      // 阻止缩放逻辑
    }
  },
  async mounted() {
    // 从localstorage中拿数据
    const localStorageId = this.$route.query.localStorageId
    this.localStorageId = localStorageId
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId)
      if (data) {
        this.reportData = JSON.parse(data)
        console.log('reportData:', this.reportData)
      }
    }

    // 从接口获取数据
    try {
      // 取消注释并使用你的实际API调用
      const { result } = await searchInpsectCheckPreview(this.reportData.taskId)
      console.log('API返回数据:', result)
      this.previewData = result || this.previewData
      this.$message.success('报表已生成！')

    } catch (err) {
      console.error('数据加载失败:', err)
      this.$message.error('报表生成失败！')
    }
  },

  beforeDestroy() {
    // 清理逻辑
    window.removeEventListener('keydown', this.preventZoom)
    window.removeEventListener('wheel', this.preventZoom)

    const viewportMeta = document.querySelector('meta[name=viewport]')
    if (viewportMeta) {
      viewportMeta.content = this.originalViewport
    }

    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document.querySelector('body').setAttribute('style', 'background-color: white;')
  },

  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;')
  }
}
</script>

<style>
/* 样式部分保持不变 */
@media print {
  /*隐藏按钮*/
  .report-top-button {
    display: none !important;
  }

  /*隐藏图例*/
  .example {
    display: none !important;
  }

  .table1_container {
    width: 100% !important;
    margin: 0 0 !important;
    font-size: 13px !important;
  }

  .table1_dataShower {
    width: 100% !important;
    margin: 0 0 !important;
    padding: 15px !important;
    border: none !important;
    font-size: 10px !important;
  }

  .table1_reportTable tr td, .table1_reportTable tr th {
    border: 1px solid black;
    height: 28px !important;
  }

  .table1_reportTable #table1_reportTable_bottom td {
    border: none;
    height: 17px !important;
  }

  @page {
    size: A4 portrait;
    /* 完全去除页边距 */
    margin: 0;

    /* 或者分别设置各个边距为0 */
    margin-top: 20px;
    margin-right: 0;
    margin-bottom: 0px;
    margin-left: 0;

    /* 去除页眉页脚内容 */
    @top-left {
      content: none;
    }
    @top-center {
      content: none;
    }
    @top-right {
      content: none;
    }
    @bottom-left {
      content: none;
    }
    @bottom-center {
      content: none;
    }
    @bottom-right {
      content: none;
    }
  }

  @Page :first {
    margin-top: 5px !important;
  }
}

/*
先来设置每个任务项对应的背景颜色吧！
 */
.row-unfinished {
  background-color: #ffffff; /* 未完成 - 白色或默认色 */
}

.row-finished {
  background-color: #e6f7e6; /* 已完成 - 浅绿色 */
}

.row-failed {
  background-color: #ffebeb; /* 不合格重采 - 浅红色 */
}

.table1_container {
  width: 80%;
  background: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 20px;
}

.table1_dataShower {
  width: 90%;
  background: white;
  margin: 0 auto;
  border: 2px black solid;
}

/*这是返回按钮的样式*/
.report-top-button {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6); /* 建筑行业蓝色调，稳重且有活力 */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.report-top-button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

.table1_reportTable {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid black;
  table-layout: fixed;
}

.table1_reportTable tr td, .table1_reportTable tr th {
  border: 1px solid black;
  height: 70px;
}

#table1_reportTable_bottom td {
  border: none;
  height: 50px !important;
}

.rowspanStyle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

th {
  box-sizing: border-box !important;
}
</style>
